<template>
  <div>Watch侦查监听函数</div>
  <p>{{ z.a }}</p>
  <p>{{ z }}</p>
  <button @click="zadd">z值自增</button>
  <button @click="changeZ">修改z对象</button>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(0);
const y = ref(0);
const z = ref({
  a: 88,
});

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`);
});

// getter 函数 支持多方位监听数据,以前是把该数据先写到计算属性中,再去监听
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`);
  }
);
// 多个来源组成的数组 写成计算属性然后深度监听
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`);
});
// 单个 ref
watch(
  () => z.value.a,
  (newZ) => {
    console.log(`z is ${newZ}`);
  }
);
watch(z, (newZ) => {
  console.log(newZ);
  console.log(`z is ${newZ}`);
});
watch(
  () => z.value,
  (newZ) => {
    console.log(newZ);
  },
  { once: true, deep: true, immediate: true }
);
function zadd() {
  z.value.a++;
}
// 修改z值替换该对象时才会触发监听事件,修改对象里的值需要加上深度监听或者直接监听该值,跟vue2中的比较像
function changeZ() {
  z.value = {
    ...z.value,
    kkx: "已改变",
  };
}
// reactive对象直接支持深度监听
const obj = reactive({ count: 0 });

watch(obj, (newValue, oldValue) => {
  console.log(newValue, oldValue);
  // 在嵌套的属性变更时触发
  // 注意：`newValue` 此处和 `oldValue` 是相等的
  // 因为它们是同一个对象！
});
// 我不知道我口考嘛规则吗，绵阳哈哈哈的该死的温柔
// 一炮真三天确实还不错哈哈哈是真的吗还是假的我也不知道到底该嗯么办到底该怎么办
// 死亡不过如此究竟是那边的生活更值得珍惜
// 25+14+20 60
// 25+16+10 51
// 运动+跑步，鸡蛋,公众号
// 运动+散步，鸡蛋，剪头发
</script>
